import React from 'react'
import styled,{ThemeProvider} from 'styled-components'

const Button = (props) => {
  console.log('props:',props);
/*
props: {className: "test___StyledButton-sc-1ec5zi1-0 diRAvA"}
  className: "test___StyledButton-sc-1ec5zi1-0 diRAvA"
  __proto__: Object
*/
  return (
    <button className={props.className}> test button </button>
  )
};


export default () => (
  <div>
    <ThemeProvider theme={{themeColor: 'green'}}>
      <Button
        css="padding: 0.5em 1em;"
      />

      <Button
        css={`
        background: pink;
        color: ${props => props.red ? 'red' : 'blue'}
      `}
        red={true}
      />

      <p css={`color:${props => props.theme.themeColor}`}>普通标签也可以使用css-prop</p>
    </ThemeProvider>
  </div>
);
